import 'package:base_plugin/base_plugin.dart';
import 'package:finance_app/generated/l10n.dart';
import 'package:finance_app/src/common/app_colors.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class NormalCircleChart extends StatefulWidget {
  final List<String> itemList;
  final String itemTitle;
  final List<double> valueList;
  final String currency;
  final String total;
  final String emptyTip;

  const NormalCircleChart(
      {Key key,
      this.emptyTip,
      this.itemList,
      this.valueList,
      this.itemTitle,
      this.currency,
      this.total})
      : super(key: key);

  @override
  _NormalCircleChartState createState() => _NormalCircleChartState();
}

class _NormalCircleChartState extends State<NormalCircleChart> {
  List<Color> colors = [
    aceBlueColor,
    Color(0xff8EB7F5),
    Color(0xffBAC9E0),
    Color(0xffD4D4D4),
  ];

  int touchedIndex;

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 1.7,
      child: Row(
        children: <Widget>[
          const SizedBox(
            height: 18,
          ),
          Expanded(
            child: AspectRatio(
              aspectRatio: 1,
              child: Stack(
                children: [
                  PieChart(
                    PieChartData(
                        pieTouchData: PieTouchData(
                            touchCallback: (touchEvent, pieTouchResponse) {
                          setState(() {
                            touchedIndex = pieTouchResponse
                                ?.touchedSection?.touchedSectionIndex;
                          });
                        }),
                        borderData: FlBorderData(show: false),
                        sectionsSpace: 0,
                        centerSpaceRadius: getDp(60),
                        sections: showingSections()),
                  ),
                  Center(
                    child: Text(
                      '''${S.current.total}
${widget.total ?? '0.00'}''',
                      style: TextStyle(
                        color: aceBlackColor,
                        fontSize: getSp(16),
                        fontWeight: FontWeight.w700,
                        height: 18 / 16,
                      ),
                      textAlign: TextAlign.center,
                    ),
                  )
                ],
              ),
            ),
          ),
          SizedBox(
            width: getDp(34),
          ),
          Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                widget.itemTitle ?? '',
                style: TextStyle(
                  color: aceBlackColor,
                  fontSize: getSp(14),
                  fontWeight: FontWeight.w700,
                  height: 1,
                ),
              ),
              SizedBox(
                height: getDp(12),
              ),
              if (widget.total != '0.00')
                ...List.generate(
                    widget.itemList.length,
                    (index) => Indicator(
                          color: colors[index % colors.length],
                          text: widget.itemList[index],
                        )).toList()
              else
                Indicator(
                  color: colors.last,
                  text: widget.emptyTip ?? S.current.not_category_found,
                )
            ],
          ),
        ],
      ),
    );
  }

  List<PieChartSectionData> showingSections() {
    if (widget.valueList == null || widget.total == '0.00') {
      final isTouched = false;
      final double radius = isTouched ? 20 : 12;
      return [
        PieChartSectionData(
          color: colors.last,
          value: 1,
          title: '0%',
          radius: radius,
          showTitle: false,
        )
      ];
    } else {
      return List.generate(widget.valueList.length, (i) {
        final isTouched = i == touchedIndex;
        // final double fontSize = isTouched ? 25 : 16;
        final double radius = isTouched ? 20 : 12;
        final item = widget.valueList[i];
        return PieChartSectionData(
          color: i > colors.length - 1 ? colors.last : colors[i],
          value: item,
          title: '${item.toInt()}%',
          radius: radius,
          showTitle: false,
        );
      });
    }
  }
}

class Indicator extends StatelessWidget {
  final Color color;
  final String text;

  const Indicator({
    Key key,
    this.color,
    this.text,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(bottom: getDp(10)),
      child: Row(
        children: <Widget>[
          Container(
            width: getDp(11),
            height: getDp(11),
            decoration: BoxDecoration(
              color: color,
              borderRadius: BorderRadius.circular(getDp(2)),
            ),
          ),
          SizedBox(
            width: getDp(10),
          ),
          Container(
            constraints: BoxConstraints(
              maxWidth: getDp(130),
            ),
            child: Text(
              text,
              style: TextStyle(
                  fontSize: getSp(14),
                  fontWeight: FontWeight.w400,
                  color: aceBlackColor),
            ),
          )
        ],
      ),
    );
  }
}
